
<template>
  <div class="sub-body">
    <el-row justify="center" align="center">
      <el-col>
        <el-card class="upload-card">
          <el-row justify="center" style="padding-top: 12px;">
            <el-col :span="10">
              <h2>上传视频</h2>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center">
            <el-col>
              <filepond @video="video"></filepond>
            </el-col>
          </el-row>
          <!-- 返回图片 -->
          <el-row justify="center" gutter="10">
            <el-col v-for="item in videPhotoList" :key="item.index" :span="8">
              <div class="thumbnail-container">
                <el-image
                    :src="'http://localhost:9091/images/video/' + item"
                    aspect-ratio="1.77"
                    contain
                    max-height="150"
                    alt="封面图，推荐16：9"
                />
                <el-row justify="center">
                  <el-button text color="success" @click="setAutoFaceImage(item)">选择</el-button>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center">
            <el-col :span="10">
              <el-button v-if="isShowUploadFaceButton" color="green" @click="isShowUploadFaceImage = true">
                没有想要的封面图，我要上传
              </el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <!-- 基本信息 -->
          <el-row justify="center">
            <el-col :span="10">
              <h2>基本信息</h2>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center">
            <h4>封面</h4>
            <el-col :span="8">
              <el-card class="cover-card">
                <img
                    :src="'http://localhost:9091/images/video/' + article.imgurl"
                    style="width: 100%"
                    v-if="imgshow"
                    @click="isimgshow"
                />
              </el-card>
            </el-col>
            <el-col v-if="isShowUploadFaceImage" :span="12">
              <el-button @click="isimgshow">取消选择</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center">
            <h4>分区</h4>
            <el-col :span="12">
              <el-select style="width: 100%" :placeholder="cate.fa" @change="changesort">
                <el-option v-for="item in sort" :label="item.name" :key="item.id" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select style="width: 100%" :placeholder="cate.ch" @change="changesortchild">
                <el-option v-for="item in childsort" :label="item.name" :key="item.id" :value="item.id"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center" align="center">
            <h4>标题</h4>
            <el-col :span="24" style="margin: auto">
              <el-input v-model="article.sername" placeholder="标题"></el-input>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center">
            <h4>描述</h4>
            <el-col span="24">
              <el-input type="textarea" :rows="6" v-model="article.des" placeholder="描述"></el-input>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center">
            <el-col :span="24">
              <h4>标签</h4>
              <div style="margin-bottom: 20px;">
                <el-input v-model="editableTabsValue" placeholder="标签" style="width: 90%"></el-input>
                <el-button size="small" @click="addTab(editableTabsValue)">add tab</el-button>
              </div>
              <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" :name="item.name"></el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row justify="center" style="padding-bottom: 12px">
            <el-col :span="10">
              <el-button type="primary" @click="sunvdeo">立即投稿</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import filepond from "@/components/upload/filepond-upload.vue";
import { getsort, addsub } from "@/api";

export default {
  components: { filepond },
  data() {
    return {
      imgshow: false,
      editableTabsValue: '',
      editableTabs: [],
      tabIndex: 2,
      sort: [],
      childsort: [],
      videoData: {},
      videPhotoList: [],
      isShowUploadFaceButton: false,
      isShowUploadFaceImage: false,
      cate: {
        fa: '主分区',
        ch: '分区'
      },
      article: {
        uid: {},
        name: '',
        sername: '',
        des: '',
        imgurl: '',
        category: '',
        tag: '',
        video: '',
        imageId: ''
      },
    };
  },
  mounted() {
    console.log(this.$cookies.get("user"));
    this.getcate();
    this.article.uid = this.$cookies.get("user").id;
  },
  methods: {
    sunvdeo() {
      addsub(this.article).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: '投稿成功',
            type: 'success'
          });
          this.$router.push({ path: '/video' });
        }
      });
    },
    isimgshow() {
      this.imgshow = false;
    },
    setAutoFaceImage(item) {
      this.article.imgurl = item;
      this.imgshow = true;
    },
    changesortchild(val) {
      for (let i = 0; i < this.childsort.length; i++) {
        if (this.childsort[i].id == val) {
          this.cate.ch = this.childsort[i].name;
          this.article.category = this.cate.fa + "/" + this.cate.ch;
          break;
        }
      }
    },
    changesort(date) {
      for (let i = 0; i < this.sort.length; i++) {
        if (this.sort[i].id == date) {
          this.childsort = this.sort[i].child;
          this.cate.fa = this.sort[i].name;
          break;
        }
      }
    },
    getcate() {
      getsort().then(res => {
        this.sort = res.data.data;
        console.log(res.data.data);
      });
    },
    video(data) {
      this.videoData = JSON.parse(data);
      console.log(this.videoData.data.videoid);
      this.article.name = this.videoData.data.videoid;
      this.isShowUploadFaceButton = true;
      this.videPhotoList = this.videoData.data.img;
      this.isShowUploadFaceImage = true;
      this.article.video = this.videoData.data.video;
      console.log(this.videoData.data.img);
    },
    addTab(targetName) {
      let newTabName = this.editableTabsValue;
      this.article.tag = this.article.tag + "/" + newTabName;
      this.editableTabs.push({
        title: this.editableTabsValue,
        name: this.editableTabsValue,
        content: 'New Tab content'
      });
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }
  }
};
</script>


<style scoped lang="less">
.sub-body {
  height: 87vh;
  overflow-y: auto;
  background-color: #f5f5f5; /* 背景颜色 */
}

.upload-card {
  width: 80%;
  margin: auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.thumbnail-container {
  width: 350px;
  padding-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: scale(1.05);
  }

  .el-image {
    border-radius: 8px;
  }

  .el-button {
    margin-top: 10px;
  }
}

.cover-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: scale(1.05);
  }

  img {
    border-radius: 8px;
  }
}

.el-button {
  border-radius: 20px;
  transition: background-color 0.2s ease-in-out;

  &:hover {
    background-color: #e0e0e0;
  }
}

.el-select {
  border-radius: 8px;
}

.el-input {
  border-radius: 8px;
}

.el-textarea {
  border-radius: 8px;
}

.el-tabs {
  border-radius: 8px;
}

.el-tabs__header {
  margin-bottom: 0;
}

.el-tabs__nav-wrap::after {
  height: 0;
}

.el-tabs__item {
  border-radius: 8px;
  margin-right: 10px;
  transition: background-color 0.2s ease-in-out;

  &:hover {
    background-color: #e0e0e0;
  }
}

.el-tabs__content {
  padding: 20px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
